<template>
  <div>
    <h1>姓名:{{person.name }}</h1>
    <h1>年龄:{{ person.age }}</h1>
    <h1>类型:{{ person.job.type }}</h1>
    <h1>薪水:{{ person.job.salary }}</h1>
    <h1>测试嵌套:{{ person.job.a.b.c }}</h1>
    <h1>爱好:{{ person.hobby }}</h1>
    <button @click="changeInfo()">修改信息</button>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("JJ");
    let age = ref(18);
    let person = reactive({
      job: {
        type: "前端工程师",
        salary: "30k",
        a: {
          b: {
            c: 666
          }
        }
      },
      name:"JJ",
      age:18,
      hobby:["抽烟","喝酒","烫头"]
    });

    function changeInfo() {
      person.name = "张三";
      person.age = 20;
      person.job.type = "UI设计师";
      person.job.a.b.c = 999;
      person.hobby[0]="学习"
      console.log(person);
    }

    //返回一个对象，常用
    return {
      person,
      changeInfo
    };
  }
};
</script>

<style>
</style>
